<template>
    <div class="bigBox" style="width:400px">
        <!-- v-bind:class="{ 'active1':show1 ,'active2':show2}" -->
        <div class="img_div" >  
            <img src="../../assets/images/class/sp1.png">  
            <a href="#" >  
                <div class="mask" @mouseenter="show1 = false; show2 = true"  @mouseover="show2 = false; show1 = true">  
                    <img src="../../assets/images/class/bf.png" alt="">
                    <div class="smallIcon">
                        收费
                    </div>

                </div>  
            </a>  
        </div>
        
        <div class="title">非遗传统音乐</div>
        <div class="_buttom">
            <span class="left">主讲：初七</span>
            <span class="right">2021-10-05</span>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            show1:true,
            show2:false,
        }
    },
    methods:{
        mouseEnter(event){
            console.log(event);
        }

    }
    
}
</script>

<style lang="less" scoped>
    .bigBox{
        width: 400px;
        height: 300px;
        .img_div { 
            position: relative;
           width: 360px; height: 240px;
            img{
                width: 360px; height: 240px;
                border-radius: 30px;
            }
            img{ cursor: pointer; transition: all 0.6s; }
            
        }
        .mask { 
            position: absolute; 
            top: 0; 
            left: 0; 
            width: 360px; 
            height:240px; 
            border-radius: 29px;
            background: #65656599; 
            color: #ffffff; 
            opacity: 0; 
            img{
                position: absolute;

                top: 35%; 
                left: 40%;
                width: 60px;
                height: 60px;
            }
        } 
        .mask h3 { text-align: center; }
        .img_div a:hover .mask{ opacity: 1;transform: scale(1.1); }
        .active1{
            width: 360px;
            height: 240px;
        }
        .active2{ width: 396px; height: 264px; }
        .smallIcon{
            position: absolute;
            bottom: 88%;
            left: 10%;
        }
        .title{
            width: 100%;
            font-size:25px;
            margin: 10px 0;
        }
        ._buttom{
            font-size:20px; 
            color: #7f7f7f;
            .left{
                margin-right: 150px;
            }
        }

    }
</style>